<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><?=$title?></title>
    <link rel="stylesheet" href="/mobile/css/reset.css">
    <link rel="stylesheet" href="/mobile/css/mui.min.css">
    <script src="/mobile/js/flexible_css.debug.js"></script>
    <script src="/mobile/js/flexible.debug.js"></script>
    <link rel="stylesheet" href="/mobile/css/main_train.css">

</head>
<body>
<div id="back-btn-wrap">
    <a class="back-btn" href="javascript:history.go(-1)"></a>试卷预览
</div>

<div v-cloak class="content-main">
    <div class="answer-num-wrap">
        <i class="questions-total fr"></i>
        <i class="questions-cur fr"></i>
    </div>
    <section class="questions-wrap choose-wrap">
        <div class="questions-item clearfix">
            <div ><span class="num-now-wrap fl">1、</span></div><p class="question"></p>
        </div>
        <div class="option-item clearfix" style="">
            <span>A</span><p class="option-text"></p>
        </div>
        <div class="option-item clearfix">
            <span>B</span><p class="option-text"></p>
        </div>
        <div class="option-item clearfix">
            <span>C</span><p class="option-text"></p>
        </div>
    </section>
    <button id="btn-next" class="btn1" now-page = '1'>下一题</button>
    <button id="btn-exit" class="btn1">退出答题</button>
    <div class="btn-submit-wrap displayNone">
        <button id="btn-submit" class="btn2">提交</button>
    </div>
</div>
<script src="/mobile/js/jquery.min.js"></script>
<script src="/mobile/js/common.js"></script>
<script src="/mobile/js/mui.min.js"></script>
<script src="/mobile/js/jrrpc.js"></script>

<script>
    $(function(){
        mui.init();
        var appParam = iService.getAppParam();

        function exitEdit(e){
            e.preventDefault();
            var btnArray = ['退出', '继续答题'];
            mui.confirm('选择退出之前所答题目将全部清除，你确定退出吗', '退出答题', btnArray, function(e) {
                if (e.index == 1) {
//                    继续答题
                } else {
//                    回到app
                    if(iService.getUserAgent().isiOS){
                        FinishPaper();
                    }else {
                        h5button.FinishPaper();
                    }
                }
            });
        }

        document.getElementById('btn-exit').addEventListener('tap',exitEdit);
        $(".back-btn").on('click',exitEdit);

        var question_arr = [],
                answers = [],//答案数组
                btn_next = $('#btn-next'),
                nowpage = $(btn_next).attr('now-page'),
                questions_cur = $('.questions-cur'),
                questions_wrap = $('.questions-wrap'),
                questions_total = $('.questions-total'),
                option_item = $('.option-item'),
                btn_submit = $('#btn-submit'),que_count;

        //        选择答案
        mui('.questions-wrap').off('click').on('click','.option-item',function(){
            if($(this).siblings('.questions-item').attr('data-type')==2){
                $(this).toggleClass('active').children('span').toggleClass('active');

            }else {
                $(this).addClass('active').children('span').addClass('active');
                $(this).siblings('.option-item').removeClass('active').children('span').removeClass('active');
            }

        });



        function getQuestion(page){
            var param = {
                postData:'Question/lists',
                data: {
                    page:page
                }
            };
            $.extend(param.data,appParam);
            $.JsonRpc(param,function(result){
//                console.log(result);
               /* if(result.data.answer){
                    // 跳到答题卡
                    window.location.href = 'result?token='+appParam.token+'&llid='+appParam.llid+'';
                    return false;
                }*/
                question_arr.push(result.data.lists[0]);
                var nowpage = btn_next.attr('now-page');
                if(page==nowpage){
                    if(page==1){
                        questions_total.html('/'+result.data.count);
                        que_count = result.data.count;
                        btn_next.attr('total-page',result.data.count);
                        getQuestion(2);
                    }
                    showQuestion(page);
                    if(nowpage==btn_next.attr('total-page')){
                        $("#btn-next").css('visibility','hidden');
                        $(".btn-submit-wrap").show();
                    }
                }
            });
        }

        getQuestion(nowpage);

        function showQuestion(page){
            var k = page-1;
            /*if(!question_arr[k]){
                getQuestion(page);
            }*/
            questions_cur.html(page);
            btn_next.attr('qid',question_arr[k].qid);
            var quee_type='单选题';
            if(question_arr[k].type==2){
                quee_type='多选题';
            }
            questions_wrap.html(
                    '<div class="questions-item clearfix" data-type="'+question_arr[k].type+'">'+
                    '<div><span class="num-now-wrap fl">'+page+'、</span></div><p class="question">'+question_arr[k].topic+'？('+quee_type+')</p>'+
                    '</div>'+
                    '<div class="option-item clearfix" style="">'+
                    '<span>A</span><p class="option-text">'+question_arr[k].option_a+'</p>'+
                    '</div>'+
                    '<div class="option-item clearfix">'+
                    '<span>B</span><p class="option-text">'+question_arr[k].option_b+'</p>'+
                    '</div>'+
                    '<div class="option-item clearfix">'+
                    '<span>C</span><p class="option-text">'+question_arr[k].option_c+'</p>'+
                    '</div>'+
                    '<div class="option-item clearfix">'+
                    '<span>D</span><p class="option-text">'+question_arr[k].option_d+'</p>'+
                    '</div>'
            );
            $.each($(".option-item span"),function(){
                var height_cur = $(this).parent('.option-item').height();
                $(this).height(height_cur);
                $(this).css('line-height',height_cur+'px');
            });
        }

        btn_next[0].addEventListener('tap',function(e){
            e.preventDefault();
            if(!$('.option-item').hasClass('active')){
                mui.alert('请选择一个选项', ' ', function(e) {
                });
                return false;
            }
            var qid = $(this).attr('qid');
//            var option = $(this).attr('data-correct');
            var option = '';
            var option_co = $('.option-item').parent('.questions-wrap').find('.option-item.active');
            $.each(option_co,function(){
                if($(this).hasClass('active')){
                    option += parseInt(parseInt($('.option-item').index($(this)))+1)+','
                }
            });
            option = option.slice(0,option.length-1);
            if(answers.length<que_count){
                answers.push({'qid':qid,'correct':option});
            }
            var nowpage = parseInt(btn_next.attr('now-page'))+1;
            btn_next.attr('now-page',nowpage);
            showQuestion(nowpage);
            if(nowpage==btn_next.attr('total-page')){
                $("#btn-next").css('visibility','hidden');
                $(".btn-submit-wrap").show();
                return false;
            }
            getQuestion(parseInt(nowpage)+1);
        });

        btn_submit[0].addEventListener('tap',function(e){
            e.preventDefault();
            if(!$('.option-item').hasClass('active')){
                mui.alert('请选择一个选项', ' ', function(e) {
                });
                return false;
            }
            var qid = btn_next.attr('qid');
            var option = parseInt($('.option-item').index($('.active')))+1;
            answers.push({qid:qid,correct:option});

            var req = {
                postData:'Question/answer',
                data: {
                    result:JSON.stringify(answers)
                }
            };
            $.extend(req.data,appParam);

            $.JsonRpc(req,function(result){
                console.log(result);
                mui.alert('试卷提交成功', ' ', function(e) {
                    window.location.href = 'result?token='+appParam.token+'&llid='+appParam.llid+'';
                });
            });

            /*var btnArray = ['继续答题', '确认提交'];
            mui.confirm('','你还有题目未做答，确认提交？', btnArray, function(e) {
                if (e.index == 1) {
//                    提交
                } else {
//                    做题
                }
            });*/
        });
        $.get('https://www.wzxaini9.cn/api/flow/index/id/11', function (data) {
            console.log($.parseJSON(data));
        })
    });
</script>
</body>
</html>












